<template>
	<Page>
		<Topbar hideMenu />
		<Content>
			<Panel header headerBorder title="车间生产" style="padding: 4rem;">
				<view slot="toolbar">
					<view class="back" @click="back">
						<u-icon name="arrow-left" color="#666" size="14" style="margin-right: 0.5rem;"></u-icon> 返回
					</view>
				</view>

				<view class="table-demo">
					<view class="search-box">
						工单号
						<input class="search-input" type="text" v-model="searchValue" @confirm="confirmScanCode" />
						<uni-icons type="scan" @click="scanCode" size="25" style="margin-left: 5rpx;"></uni-icons>

					</view>
					<Table ref="table" :columns="columns" :src="src" :params="params" @rowClick="click" pagination />
				</view>
			</Panel>
		</Content>
	</Page>
</template>

<script>
	import Page from "@/components/page/index.vue";
	import Topbar from "@/components/topbar/index.vue";
	import Content from "@/components/content/index.vue";
	import Panel from "@/components/panel/index.vue";
	import Table from '@/components/table/index.vue';
	import fetch from "@/utils/fetch";
	import {
		getDevice
	} from "@/store/user.js";

	export default {
		components: {
			Page,
			Topbar,
			Content,
			Panel,
			Table
		},
		data() {
			return {
				src: '/dms/mobile/selectWorkOrderByWorkCode',
				params: {
					deviceId: getDevice().id,
					deviceNo: getDevice().deviceNo,
					workCode: null,
				},
				searchValue: '',
				columns: [{
						label: '工单状态',
						value: 'state',
					}, {
						label: '产品名称',
						value: 'materialName',
						width: '43rem',
					}, {
						label: '图号规格',
						value: 'customMaterialCode',
						width: '25rem',
					},
					{
						label: '材料牌号',
						value: 'materialMark',
						width: '25rem',
					}, {
						label: '计划数量',
						value: 'planProduceQuantity',
						type: 'number'
					}, {
						label: '生产数量',
						value: 'produceQuantity',
						type: 'number'
					}, {
						label: '已报工数量',
						value: 'reportedQuantity',
						type: 'number'
					}, {
						label: '工单号',
						value: 'workCode',
						width: '20rem',
					}, {
						label: '计划开始时间',
						value: 'workStartTime',
						width: '27rem',
					}, {
						label: '油品',
						value: 'oilClassification',
					}, {
						label: '客户',
						value: 'custom',
					}, {
						label: '工序',
						value: 'productionProcesses',
					}, {
						label: '工单组号',
						value: 'groupItem',
						width: '20rem',
					}, {
						label: '产品编号',
						value: 'materialCode',
						width: '20rem',
					}, {
						label: '产品型号',
						value: 'materialModel',
						width: '30rem',
					}, {
						label: '模具名称',
						value: 'moldName',
					}, {
						label: '模具编号',
						value: 'moldCode',
					}, {
						label: '生产顺序',
						value: 'sort',
					},
				],
			}
		},
		methods: {
			back() {
				this.goto('/pages/workbench/index');
			},
			goto(url) {
				uni.navigateTo({
					url,
					animationType: "pop-in",
					animationDuration: 1000,
				})
			},
			confirmScanCode() {
				this.params.workCode = this.searchValue
				this.params.deviceNo = this.params.deviceNo
				this.$refs['table'] && this.$refs['table'].reload();
			},
			scanCode() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode', 'barCode'],
					success: (res) => {
						this.searchValue = res.result;
						this.params.workCode = res.result;
						this.$refs['table'] && this.$refs['table'].reload();
					},
					fail: (err) => {
						console.log('扫码失败', err);
						this.$toast('扫码失败');
					}
				});
			},
			click(item, index) {
				// if (index !== 0) {
				// 	this.$toast('只允许操作第一条记录');
				// 	return;
				// }
				const deviceNo = getDevice().deviceNo;
				let url = '/pages/workbench/productionNew/info?workCode=' + item.workCode + '&deviceNo=' + deviceNo;;
				this.goto(url)
				return

				const switchStatus = (state, flag) => {
					switch (state) {
						case '下发':
							url = '/pages/workbench/production/change/index?workCode=' + item.workCode;
							break;
						case '转产中':
							url = '/pages/workbench/production/change/index?workCode=' + item.workCode;
							break;
						case '转产完成':
							url = '/pages/workbench/production/debug/index?workCode=' + item.workCode;
							break;
						case '调机中':
							url = '/pages/workbench/production/debug/index?workCode=' + item.workCode;
							break;
						case '调机中断':
							url = '/pages/workbench/production/debug/index?workCode=' + item.workCode;
							break;
						case '调机完成':
							url = '/pages/workbench/production/exec/index?workCode=' + item.workCode;
							break;
						case '生产':
							url = '/pages/workbench/production/exec/index?workCode=' + item.workCode;
							break;
						case '完成':
							url = '/pages/workbench/production/stripping/index?workCode=' + item.workCode;
							break;
						case '中断':
							url = '/pages/workbench/production/interrupt/index?workCode=' + item.workCode;
							break;
						default:
							url = '';
					}
					if (url !== '') {
						if (flag) {
							this.goto(url + '&state=' + state + '&flag=true');
						} else this.goto(url);
					} else {
						this.$toast('工单已拆模或暂停');
					}
				}
				// switchStatus(item.state)
				if (item.state == '下发' || item.state == '转产完成') {
					fetch('get', '/dms/mobile/jumpFlow', {
						workCode: item.workCode
					}).then(res => {
						if (res == false) {
							switchStatus(item.state)
						} else {
							switchStatus(res, true)
						}
					})
				} else switchStatus(item.state)
			},
		},
		mounted() {
			console.log(getDevice());
			// this.$refs['table'] && this.$refs['table'].reload();
		},
		onShow() {
			if (this.searchValue) {
				this.$refs['table'] && this.$refs['table'].reload();
			}
		}
	}
</script>

<style scoped lang="scss">
	.back {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666;
	}

	.search-box {
		display: flex;
		align-items: center;
		margin-bottom: 2rem;

		.search-input {
			width: 300rpx;
			height: 4rem;
			padding: 0 1rem;
			border: 1px solid #dcdfe6;
			border-radius: 4px 0 0 4px;
			// background-color: #f5f7fa;
			color: #909399;
			cursor: pointer;
			margin-left: 5rpx;
		}

		.scan-btn {
			width: 8rem;
			height: 4rem;
			background-color: #409eff;
			color: white;
			border: none;
			border-radius: 0 4px 4px 0;
			cursor: pointer;

			&:active {
				opacity: 0.8;
			}
		}
	}

	.table-demo {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.table {
		width: 100%;
		display: flex;
		flex-direction: column;
		border: 1px solid #ecf0f2;
		border-radius: 2rem;
		overflow: hidden;
		position: relative;

		.table-loading {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(255, 255, 255, 0.8);
		}

		.table-empty {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 4rem 0;
			font-size: 2rem;
		}

		.table-tr {
			display: flex;
			flex-direction: row;
			border-top: 1px solid #ecf0f2;
		}

		.table-th {
			flex: 1;
			background: #edf1f3;
			font-size: 2rem;
			text-align: center;
			padding: 2rem 0;
			overflow: hidden;
		}

		.table-td {
			flex: 1;
			font-size: 2rem;
			text-align: center;
			padding: 1.8rem 0;
			overflow: hidden;
		}

		.text-overflow-ellipsis {
			width: 80%;
			padding: 0;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin: 0 auto;
		}
	}

	/deep/ .uni-pagination-box {
		display: flex;
		justify-content: flex-end;
		margin-top: 2rem;
		font-size: 2rem;

		.uni-pagination__total {
			font-size: 2rem;
		}

		.uni-pagination__btn {
			font-size: 2rem;
		}

		.uni-pagination__num {
			font-size: 2rem;
		}

		.uni-pagination__num-tag {
			width: 6rem;
		}
	}
</style>